* {
  margin: 0;
  padding: 0;
}
.app {
  background: rgb(98, 98, 98);
  header {
    padding-bottom: 30px;
    .header-img {
      text-align: center;
    }
    .header-nav {
      position: relative;
      width: 70%;
      margin: auto;
      div {
        display: inline-block;
        width: 50%;
      }
      .left {
        ul {
          li {
            list-style: none;
            display: inline-block;
            width: 20%;
            color: white;
            text-align: center;
            font-size: 17 px;
          }
        }
      }
      .right {
        width: 30%;
        position: absolute;
        right: 0;
        top: 0;
        input {
          width: 80%;
          padding: 7px;
          background-color: transparent;
          border: 1px solid #ddd;
        }
        span {
          width: 20%;
          display: inline-block;
          background: white;
          padding: 9px 0;
          text-align: center;
        }
      }
    }
  }
}
main {
  width: 70%;
  margin: auto;
  .about {
    background: rgb(246, 246, 246);
    .top {
      padding: 15px 0;
      text-align: center;
      h1 {
        font-weight: 300;
        font-size: 40px;
      }
      p {
        font-family: "Merriweather", Georgia, serif;
        color: #888;
        font-size: 17px;
        display: block;
        margin: 0;
      }
    }
    .main {
      .img {
        width: 96%;
        margin: auto;
        padding: 15px;
        img {
          max-width: 100%;
        }
      }
      .center {
        width: 80%;
        margin: auto;
        padding: 30px 0;
        p {
          font-size: 20px;
          color: #888;
          code {
            background: transparent;
            font-size: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            vertical-align: top;
            font-weight: 200;
          }
        }
        blockquote {
          border-left: 3px solid #1c7791;
          margin: 0 50px;
          font-style: italic;
          color: #666;
          padding-left: 20px;
        }
      }
    }
    .bottom {
      width: 80%;
      margin: 30px 10%;
      .text {
        h3 {
          font-size: 26px;
        }
        p {
          font-size: 17px;
        }
      }
      .input {
        div {
          p {
            font-size: 23px;
            font-weight: 400;
            margin: 0;
          }
          input {
            width: 90%;
            margin: auto;
            padding: 13px 0;
            border: 1px solid #e3e3e3;
          }
          textarea {
            border: 1px solid #e3e3e3;

            width: 100%;
          }
        }
      }
      .btn {
        text-align: center;
        padding: 30px 0;
        span {
          display: inline-block;
          padding: 12px 25px;
          color: white;
          background: rgb(9, 143, 142);
          border-radius: 25px;
          font-size: 22px;
        }
      }
    }
  }
  .home {
    .top {
      background-image: url(https://www.jq22.com/demo/jqueryGrjlmoban202102230302/images/young-man2.jpg);
      height: 900px;
      div {
        padding: 50px;
        width: 70%;
        margin: auto;
        p {
          color: #999;
          font-size: 23px;
        }
      }
    }
    .main {
      .top {
        position: relative;
        height: 380px;
        div {
          display: inline-block;
          width: 50%;
          // height: 100%;
        }
        .yi {
          height: 100%;
          background: rgb(9, 143, 142);
          div {
            width: 80%;
            margin: auto;
            color: white;
            padding: 0;
            h1 {
              font-size: 25px;
              color: white;
            }
            b {
              width: 30px;
              background: white;
            }
            p {
              color: white;
              font-size: 17px;
            }
          }
        }
        .er {
          height: 100%;
          position: absolute;
          background: rgba(33, 33, 33, 0.8);
          div {
            width: 80%;
            margin: auto;
            padding: 0;
            div {
              width: 100%;
              padding: 0;
              div {
                height: 50px;
                width: 50%;
                margin: auto;
                color: white;
                text-align: center;
                b {
                  font-size: 80px;
                }
                p {
                  font-size: 30px;
                  color: white;
                }
              }
            }
          }
          div {
            p {
              font-size: 16px;
              color: white;
            }
          }
        }
      }
      .main-main {
        background-image: url(https://www.jq22.com/demo/jqueryGrjlmoban202102230302/images/bg-5.jpg);
        ul {
          li {
            display: inline-block;
            list-style: none;
            width: 25%;
            height: 250px;
            color: white;
            &:hover {
              background-image: url(https://www.jq22.com/demo/jqueryGrjlmoban202102230302/images/1.jpg);
            }
          }
          div {
            width: 90%;
            margin: auto;
            h1 {
              color: white;
              font-size: 50px;
              font-weight: 230;
            }
          }
        }
      }
    }
    .bottom {
      background: #e3e3e3;
      .bot-box {
        padding: 30px 0;
        width: 80%;
        margin: auto;
        div {
          margin-bottom: 30px;
          input {
            width: 70%;
            border: 0px solid #e3e3e3;
            padding: 5px;
          }
          div {
            display: inline-block;
            width: 30%;
            span {
              display: block;
              width: 50%;
              background: rgb(12, 125, 124);
              padding: 7px;
              margin: auto;
              border-radius: 25px;
              text-align: center;
              color: white;
              &:hover {
                @keyframes example {
                  50% {
                    background: #222;
                  }
                }
                animation-name: example;
                animation-duration: 2s;
                animation-iteration-count: infinite;
              }
            }
          }
        }
      }
    }
  }
  .block {
    div {
      position: relative;
      height: 400px;
      margin-bottom: 40px;
      .img {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 50%;
        img {
          height: 100%;
          max-width: 100%;
        }
      }
      .text {
        background: white;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        width: 50%;
        div {
          width: 80%;
          margin: 30px 10%;
          h1 {
            font-weight: 300;
            font-size: 50px;
          }
        }
      }
    }
  }
  .Contact {
    .box {
      background: white;
      margin-top: 100vh;
      .main {
        width: 86%;
        margin: auto;
        padding: 45px;
        p {
          font-size: 50px;
          font-weight: 400;
          text-align: center;
        }
        .input {
          form {
            label {
              display: inline-block;
              width: 33%;
              input {
                width: 90%;
                padding: 12px 5%;
              }
            }
            .text {
              margin: 30px 0;
              width: 100%;
              textarea {
                width: 98%;
              }
            }
          }
          div {
            width: 20%;
            margin: auto;
            text-align: center;
            background: rgb(9, 143, 142);
            padding: 15px 0;
            border-radius: 25px;
            span {
              color: white;
            }
          }
        }
      }
    }
  }
}

footer {
  width: 70%;
  margin: auto;
  background: black;
  .footer {
    padding: 30px 0;
    width: 86%;
    margin: auto;
    color: white;
    height: 500px;
    div {
      display: inline-block;
      width: 33%;
      position: relative;
      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        margin: auto;
        height: 200px;
        h1 {
          color: white;
          border-left: 3px solid blue;
        }
        P {
          font-size: 20px;
          margin-top: 10px;
        }
        i {
          font-size: 20px;
        }
      }
      .foote2 {
        p {
          color: #999;
          border-bottom: 1px solid #999;
          font-size: 16px;
          &:hover {
            color: white;
          }
        }
      }
    }
  }
}
